<!DOCTYPE html>
<html>

<head>
    <title>jQuery UI Month Picker tests</title>
    <meta charset="UTF-8">

    <!--flick smoothness-->
    <link rel="stylesheet" type="text/css" href="../bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
    <!-- Make sure the plugin can handle  Bootstrap's CSS (#35) -->
    <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../src/MonthPicker.css" />
    <link rel="stylesheet" type="text/css" href="test.css" />
    <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />

    <script src="../bower_components/jquery/jquery.js"></script>
    <!-- Test against 1.9.1 -->
    <script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script>
    <!-- Test against 1.9.2 -->
    <!-- Make sure the plugin can handle  Bootstrap's JS (#35) -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../bower_components/qunit/qunit/qunit.js"></script>
    <script>
        if (typeof $ === 'undefined' || !$.ui || typeof QUnit === 'undefnied') {
				var message =
					"Welcome to the jQuery UI Month Picker project.\n" +
		            "\n" +
	                "jQuery UI and QUnit are required for testing.\n" +
	                "Please download node.js, 'cd ./jquery-ui-month-picker' and run 'npm install'.\n" +
	                "\n" +
	                "Tests can be ran from the command line using the 'grunt test' command.";

				if (alert) {
					alert(message);
				}

				throw message;
			}
    </script>
    <script src="../bower_components/jquery.maskedinput/dist/jquery.maskedinput.min.js"></script>
    <script src="../src/MonthPicker.js"></script>
    <script>
        $(function() {
		       $(apiVersion).html("Version " + $.MonthPicker.VERSION);
	        });
    </script>
    <script src="test.js"></script>
</head>

<body>
    <div>
        <h2 id='apiVersion'>Version @VERSION</h2>

        <div class="demo"> <b>.position() Integration Demonstration</b>

            <br />This demonstrates the Month Picker integration with the optional .position() plugin. The right aligned input
            helps to show how the menu will not allow the edges of the window to hide it's appearance. This test should remain
            first in the list so that no automated scrolling is needed.
            <p class="text-right">
                <br />Choose a month:
                <input id="PositionDemo" type="text" value="02/2012" />
            </p>
        </div>

        <p class="demo"> <b>Button test</b>
            <br />
            <br />Choose a Month:
            <input id="IconDemo" type="text" />
            <br />Plain Button:
            <input id="PlainButtonField" />
            <br />Image Button:
            <input id="ImgButtonField" />
            <br />External element:
            <input id="ExistingButtonField" />
            <a id='ExistingButton' href='javascript:void 0;'>Open</a>
            <span id='DisabledExistingButton'>Open</span>
            <br />
            <input id="SelectorButtonField" />
            <button id='SelectorButton'>First open button</button>
            <br>
            <button id='OtherSelectorButton'>Second open button</button>
            <br> No button:
            <input id="NoButtonField" />
            <br>
			<br> ShowOn both:
            <input id="ShowOnBothField" />
        </p>

        <p class="demo"> <b>Month format test</b> Choose a Month:
            <input id="FormatField" />
        </p>

        <p class="demo"> <b>Min/MaxMonth test</b> Choose a Month:
            <input id="RistrictMonthField" />
        </p>

        <p class="demo"> <b>Right to left</b> Choose a Month:
            <input id="RTLField" />
        </p>

        <p class="demo"> <b>Toggle method test</b> Choose a Month:
            <input id="ToggleField" />
        </p>

        <p class="demo"> <b>Events</b> Choose a Month:
            <input id="EventsField" />
        </p>

        <p class="demo"> <b>Today is highlighted</b> Choose a Month:
            <input id="highlightedField" />
        </p>

        <div class="demo"> <b>Inline menu:</b>
            <div id='InlineMenuDiv'></div>
        </div>

        <div class="demo"> <b>AltField and AltFormat option test:</b>
            <input id='MainAltField' />
            <input id='SecondaryAltField' />
        </div>

        <p class="demo"> <b>Only one picker open test</b> First picker:
            <input id="FirstField" />
            <br /> Second picker:
            <input id="SecondField" />
        </p>

        <p class="demo"> <b>MinMonth and MaxMonth Demonstration</b>

            <br />This demonstrates how you can limit the user to choosing months within a given interval.
            <br />
            <br />Future months only:
            <br />
            <input id="FutureDateDemo" type="text" />
            <br />
            <br />Past months only:
            <br />
            <input id="PastDateDemo" type="text" />
            <br />
            <br />18 months from today:
            <br />
            <input id="YearAndAHalfDeom" type="text" />
        </p>
        <p class="demo"> <b>Start Year Demonstration</b>

            <br />This demonstrates how the plugin will default to the year specified in the text box. Changing the year in the
            text box will result in a new default year for the chooser and if no date is selected then the default year is
            the current year.
            <br />
            <br />Choose a month:
            <input id="StartYearDemo" type="text" value="01/2025" />
        </p>
        <p class="demo"> <b>Override Start Year Demonstration</b>

            <br />This demonstrates how the MonthPicker can be configured to override the start year default behavior. This MonthPicker
            will start on 2023 no matter which date is currently selected, even if no date is specified.
            <br />
            <br />Choose a month:
            <input id="OverrideStartYear" type="text" />
        </p>
        <p class="demo"> <b>Get Month/Year & Validation API Demonstration</b>

            <br />This demonstrates API usage for the GetSelectedMonthYear(), GetSelectedYear() and GetSelectedMonth() function
            calls which will also perform date validation. Clear() will clear the text field and any validation messages.
            <br />
            <br />Choose a month:
            <input id="GetYearDemo" class="GetYearDemo" type="text" value="02/2012" />
            <br />
            <br />
            <button type="button" onclick="alert($('.GetYearDemo').MonthPicker('GetSelectedYear'));">Get Year</button>
            <button type="button" onclick="alert($('#GetYearDemo').MonthPicker('GetSelectedMonth'));">Get Month</button>
            <button type="button" onclick="alert($('#GetYearDemo').MonthPicker('GetSelectedMonthYear'));">Get Month and Year</button>
            <button type="button" onclick="$('#GetYearDemo').MonthPicker('Clear');">Clear</button>
        </p>
        <p class="demo"> <b>Disable/Enable API Demonstration</b>

            <br />This demonstrates API usage for the Enable() and Disable().
            <br />
            <br />Choose a month:
            <input id="EnableDisableDemo" type="text" value="12/2009" />
            <br />
            <button type="button" onclick="$('#EnableDisableDemo').MonthPicker('option', 'Disabled', true);">Disable</button>
            <button type="button" onclick="$('#EnableDisableDemo').MonthPicker('option', 'Disabled', false);">Enable</button>
        </p>
        <p class="demo"> <b>Digital Bush Integration Demonstration</b>

            <br />This demonstrates how the MonthPicker plugin integrates with the <a href="http://digitalbush.com/" target="_new">Digital Bush Plugin for Input Masking</a>            as well as the html 5 placeholder attribute to simulate watermarking. Try to type an invalid date and try the
            Get Month/Year button to fire off validation.
            <br />
            <br />Type in a month/year:
            <br />
            <input id="DigitalBush" type="text" class="digital-bush" />
            <br />
            <br />Type in a month/year::
            <br />
            <input id="DigitalBushBoth" type="text" class="digital-bush" placeholder="mm/yyyy" />
            <br />
            <br />
            <button type="button" onclick="$('.digital-bush').MonthPicker('Clear');">Clear All</button>
            <button type="button" onclick="alert($('#DigitalBushBoth').MonthPicker('GetSelectedMonthYear'));">Get Month/Year</button>
        </p>

        <p class="demo"> <b>HTML 5 Month Input Type Support</b>

            <br />This demonstrates how the MonthPicker will work with the HTML 5 Month Input Type. View this section using Chrome
            to see Google's latest implementation in comparison.
            <br />
            <br /> Jquery UI Month Picker:
            <input id="Html5" type="month" class="" />
            <br />
            <br /> Chrome Month Picker:
            <input id="ChromeMonthPicker" type="month" class="" />
        </p>
    </div>
<!--
    <div id="qUnitOutput" style="margin-bottom: 25px;">
        <h1 id="qunit-header">
            qUnit Testing Output</h1>

        <h2 id="qunit-banner">
        </h2>

        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent">
        </h2>

        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup</div>
    </div>
-->
<div id="qunit"></div>
  <div id="qunit-fixture"></div>
</body>

</html>
